

<template>
  <div>
    <h1>count :{{ data.count }}</h1> 
    <h1>a :{{ a }}</h1>
    <a-button @click="data.increase">新增</a-button>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, watch, watchEffect } from 'vue'

  let a = ref(0)
  const data = reactive({
    count: 0,
    increase: () => { data.count ++; a.value += 2 } // 这是改变两个类型数据的方法
  })
  // watch 监听
  watch([a, () => data.count], (newVal, oldVal) => {
    console.log(newVal, oldVal, 'watch')
  })
  // watchEffect 监听
  watchEffect(() => {
    console.log(a.value, data.count, 'watchEffect') // ref  类型的需要加.value
  })


</script>